
var VISIBLE = 0;
var HIDDEN = -280;

var screenWidth;

var LEFT = "left";
var RIGHT = "right";
var CURRENT = "current";

var articleList;
var currentArticle = 0;
var menu;

function init() {
	menu = $("#lateralMenu");
	menu.hammer()
	   .bind("tap", function(event) {
		   menuTapHandler(event)
	   });
	
	$("#lateralMenu > li").hammer()
		.bind("tap", function(event) {
			headlineTapHandler(event);
		});
	
	$("article").hammer()
		.bind("dragstart", function(event) {
			articleDragstartHandler(event);
		})
		.bind("drag", function(event) {
			articleDragHandler(event);
		})
		.bind("dragend", function(event) {
			articleDragendHandler(event);
		})
		.bind("tap", function(event) {
			articleTapHandler(event);
		});
	
	articleList = loadArticles();
	
	screenWidth = $(window).width();
}

function loadArticles() {
	var articles = new Array();
	
	$("article").each(function (index, element) {
		articles.push($(element).attr("id"));
	});
	
	return articles;
}

function menuTapHandler(event) {
	if (!isMenuVisible()) {
		moveMenu(VISIBLE);
	}
	
}

function articleDragstartHandler(event) {
	console.log("direction = " + event.direction + " & delta = " + event.distanceX);
}

function articleDragHandler(event) {
	event.prevent_default = true; // Prevents from scrolling the browser etc.
	
	var delta = event.distanceX;
	
	var currentElement = getArticleElement(CURRENT);
	currentElement.css("left", delta + "px");
	
	var nextElement = getArticleElement(event.direction);
	var direction = (event.direction == RIGHT)? -1 : 1;
	var newLeft = (direction * screenWidth) + delta;
	nextElement.css("left", newLeft + "px");
	nextElement.removeClass("hidden");
}

function articleDragendHandler(event) {
	var currentLeftTarget;
	var nextLeftTarget;
	
	var currentElement = getArticleElement(CURRENT);
	var nextElement = getArticleElement(event.direction);
	
	var left = parseInt(currentElement.css("left"));
	var direction = (event.direction == RIGHT)? -1 : 1;
	
	if (Math.abs(left) > screenWidth/2) {
		currentLeftTarget = -1 * direction * screenWidth;
		nextLeftTarget = 0;
		currentArticle = getNextArticle(currentArticle, event.direction);
	} else {
		currentLeftTarget = 0;
		nextLeftTarget = direction * screenWidth;
	}
	
	moveArticle(currentElement, currentLeftTarget);
	moveArticle(nextElement, nextLeftTarget);
}

function transitionArticle(fromIndex, toIndex, direction) {
	var toArticle = $("#" + articleList[toIndex]);
	positionArticle(toArticle, direction);
	changeVisibility(toArticle);
	moveArticle(toArticle); 
	
	var fromArticle = $("#" + articleList[fromIndex]);
	changeVisibility(fromArticle);
}

function positionArticle(article, direction) {
	var screenSide = (direction == RIGHT)? -1 : 1;
	var screenResolution = $(window).width();
	var left = (screenSide * screenResolution) + "px";
	
	article.css("left",  left);
}

function moveArticle(article, target) {
	var leftTarget = (target == undefined)? 0 : target;
	
	// article.css("left", leftTarget + "px");

	article.animate({
	    left: leftTarget
	  }, {
	    duration: 500
	  }
	);
}

function changeVisibility(article) {
	article.toggleClass("visible hidden");
}

function getArticleElement(direction) {
	var index = getNextArticle(currentArticle, direction);
	return $("#" + articleList[index]);
}

function getNextArticle(current, direction) {
	var nextArticle = current;
	
	if (direction == LEFT) {
		nextArticle += 1;
	} else if (direction == RIGHT) {
		nextArticle -= 1;
	}
	
	return (nextArticle + articleList.length) % articleList.length;
}

function articleTapHandler(event) {
	if (isMenuVisible()) {
		moveMenu(HIDDEN);
	}
}

function headlineTapHandler(event) {
	if (isMenuVisible()) {
		moveMenu(HIDDEN);
		
		var articleId = $(event.target).attr("data-article-id");
		var nextArticle = articleList.indexOf(articleId);
		
		if (nextArticle != currentArticle){
			transitionArticle(currentArticle, nextArticle);
			currentArticle = nextArticle;
		}
	}
}

function moveMenu(position) {
	menu.animate({
	    left: position
	  }, {
	    duration: 1000,
	  });
}

function isMenuVisible() {
	return menu.css("left") == (VISIBLE + "px");
}